<template>
	<view class="list">
		<ul>
			<li v-for="(item, index) in songList" @click="songClick(index)">
				<view class="left">
					<i>{{index+1}}</i>
					<view class="content">
						<p class="name">{{item.name}}</p>
						<p class="author">{{item.ar[0].name}}</p>
					</view>
				</view>
				<i class="iconfont more">&#xe689;</i>
			</li>
		</ul>
	</view>
</template>
 
<script>
	export default {
		name: '',
		props: {
			songList: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data(){
			return {
				currentIndex: 0
			}
		},
		methods:{
			songClick(index) {
				//存储当前播放索引
				this.currentIndex = index
				
				//传递歌曲id
				uni.navigateTo({
					url: `../play/Play?id=${this.songList[index].id}`,
					
					//失败1
					//指定事件添加监听器，获取传送数据
					// events: {
					// 	acceptDataFromOpenedPage: function(data) {
					// 		console.log(data)
					// 	}
					// },
					// success: function(res) {
					// 	res.eventChannel.emit("acceptDataFromOpenerPage", {data: this.songList[index].al.picUrl})
					// }
				})
				
				//失败2
				//传递歌曲封面
				// uni.$emit("songPic", {pic: this.songList[index].al.picUrl, message: "测试"})
				
				//事件总线 失败3
				// this.$bus.$emit("songPic",{
				// 	picUrl: this.songList[index].al.picUrl,
				// 	title: this.songList[index].name
				// })
				
				//vuex传值
				//穿当前播放歌曲信息
				this.$store.commit("getSongInfo", {
					picUrl: this.songList[index].al.picUrl,
					title: this.songList[index].name,
					songList: this.songList,
					currentIndex: this.currentIndex
				})
			}
		}
	}
</script>
 
<style lang="less" scoped>
	.list {
		ul {
			padding-left: 0;
			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 40px;
				padding-left: 10px;
				color: #7f8c8d;
				border-bottom: 1px solid #eee;
			}
		}
	}
	.left {
		display: flex;
	}
	i {
		display: inline-block;
		width: 10px;
		font-size: 10px;
		font-style: normal;
		text-align: center;
	}
	.content {
		padding-left: 15px;
		font-size: 10px;
		color: black;
		.name {
			width: 200px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.author {
			color: #7f8c8d;
		}
	}
	.more {
		margin-right: 10px;
	}
</style>
